<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 作业需求：完成视频中留言板项目json文件自己完成，模仿jsonPlaceholder的格式样式自由发挥 -->

  <link rel="stylesheet" href="../../dist/css/index.min.css">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/template-native.js"></script>
  <script src="js/index.min.js"></script>
  <!-- 创建数据 -->
  <script type="text/html" id="tem">
    <!-- 获取到的数据进行遍历 -->
  <% for(var i=0; i < Participants.length; i++){ %>
    <li ulid="<%= Participants[i].id %>">
      <p class="order">第<%=Participants[i].id %>位<a href="javascript:" class="delete">删除</a></p>
      <span>参与人:</span> <span class="name">
        <%=Participants[i].userName %>
      </span>
      <p class="opinion">
        <%=Participants[i].userOpinion %>
      </p>
    </li>
    <%}%>
  </script>
</head>

<body>
  <div class="bigbox">
    <div class="box1">
      <h2>留言板</h2>
      <span>发表人:</span> <span>莤韫</span>
      <p>一起讨论一下住宅景观的现状吧！</p>
    </div>
    <div class="box2">
      <h4>请大家踊跃发言！</h4>
      用户名：<input type="text" class="text"><br>
      <textarea name="" id="" cols="113" rows="10" class="textplus"></textarea>
      <button class="btn">发表</button>
    </div>
    <div class="box3">
      <ul class="lists">
      </ul>
    </div>
  </div>
</body>

</html>